<template>
  <div class="layout-page bg-#f8f9fe">
    <div class="top">
      <div class="container">
        <img
            :src="userStore.userAvatar"
            alt=""
            class="avatar"
            @click="updateAvatar"
        />
        <div class="user-info">
          <div class="user-details">
            <h3 class="nickname">
              {{ userInfo.nickName }}
            </h3>
            <span class="username">{{ userInfo.userName }}</span>
          </div>
          <div class="actions">
            <Auth />
            <div
                class="edit-button"
                @click="editVisible = true"
            >
              <el-icon class="edit-icon"><Edit /></el-icon>
              <span class="edit-text">编辑</span>
            </div>
          </div>
          <div class="info">
            <div class="info-item">
              <span class="label">来源:</span>
              <span class="value">{{
                  SOURCE_FROM_ENUM[userInfo.userFrom] || ""
                }}</span>
            </div>
            <div class="info-item">
              <span class="label">用户类型:</span>
              <span class="value">{{
                  USER_TYPE_ENUM[userInfo.userType] || ""
                }}</span>
            </div>
            <div class="info-item">
              <span class="label">邮箱:</span>
              <span class="value">{{ userInfo.email }}</span>
            </div>
            <div class="info-item">
              <span class="label">注册时间:</span>
              <span class="value">{{
                  userInfo.createTime?.slice(0, 10)
                }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tabs-container bg-#fff">
      <div class="tabs-content">
        <el-tabs v-model="active" class="user-center-tabs">
          <el-tab-pane label="资源申请" name="application">
            <template #label>
              <span class="inline-flex items-center">
                资源申请
                <el-tooltip
                    effect="light"
                    content="自己对企业供应信息发出的申请记录，记录内包含企业联系方式，可与对应企业电话联系"
                    placement="top-start"
                >
                  <el-icon size="16" class="ml-3px"><QuestionFilled /></el-icon>
                </el-tooltip>
              </span>
            </template>
          </el-tab-pane>
          <el-tab-pane label="合作申请" name="cooperation">
            <template #label>
              <span class="inline-flex items-center">
                合作申请
                <el-tooltip
                    effect="light"
                    content="企业对自己发布的需求信息，提出的合作请求，可与对应企业进行电话联系"
                    placement="top-start"
                >
                  <el-icon size="14" class="ml-3px"><QuestionFilled /></el-icon>
                </el-tooltip>
              </span>
            </template>
          </el-tab-pane>
          <el-tab-pane label="我的需求" name="demand" lazy></el-tab-pane>
          <el-tab-pane label="我的模型" name="model" lazy></el-tab-pane>
          <el-tab-pane label="我的数据集" name="dataSource" lazy></el-tab-pane>
          <el-tab-pane label="我的订阅" name="subscribe" lazy></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="content-container">
      <keep-alive>
        <Application v-if="active === 'application'" />
      </keep-alive>
      <keep-alive>
        <Cooperation v-if="active === 'cooperation'" />
      </keep-alive>
      <keep-alive>
        <Demand v-if="active === 'demand'" />
      </keep-alive>
      <keep-alive>
        <Model v-if="active === 'model'" />
      </keep-alive>
      <keep-alive>
        <DataSource v-if="active === 'dataSource'" />
      </keep-alive>
      <keep-alive>
        <Subscribe v-if="active === 'subscribe'" />
      </keep-alive>
    </div>
    <EditPopup v-model="editVisible" @close="editVisible = false" />
  </div>
</template>

<script setup>
import { Edit, QuestionFilled } from "@element-plus/icons-vue";
import { SOURCE_FROM_ENUM, USER_TYPE_ENUM } from "@/const";
import { useUserStore } from "@/store";
import { getFile, file2Blob } from "@/utils/dom";
import {
  Application,
  Cooperation,
  Demand,
  Model,
  DataSource,
  Auth,
  EditPopup,
  Subscribe,
} from "./components";

const userStore = useUserStore();
const userInfo = computed(() => userStore?.userInfo || {});
const $api = inject("$api");

const route = useRoute();
const active = ref(route.query.active || "application");

const editVisible = ref(false);

const updateAvatar = async () => {
  const file = await getFile();
  const blobFile = await file2Blob(file);
  const formData = new FormData();
  formData.append("avatarfile", blobFile, "fileName");
  const { imgUrl } = await $api.system.updateUserAvatar(formData);
  ElMessage.success("头像修改成功");
  userStore.updateUserInfo({
    avatar: imgUrl,
  });
};
</script>

<style scoped lang="less">
.layout-page {
  background-color: #f8f9fe;
}

.top {
  background: url("/user-center-bg.png") no-repeat center;
  background-size: cover;
  padding: 16px;
  box-sizing: border-box;
  height: 207px; /* 默认高度 */
  display: flex;
  align-items: center;
}

.container {
  width: 1328px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  margin-right: 18px;
  object-fit: cover;
  cursor: pointer;
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.user-details {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.nickname {
  font-size: 24px;
  font-weight: 700;
  line-height: 35px;
}

.username {
  font-size: 18px;
  margin-left: 12px;
}

.actions {
  display: flex;
  align-items: center;
}

.edit-button {
  margin-left: 22px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.edit-icon {
  font-size: 12px;
}

.edit-text {
  color: #d3d3d3;
  margin-left: 6px;
  font-size: 14px;
}

.info {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  line-height: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  margin-right: 140px;
}

.label {
  color: #d3d3d3;
  margin-bottom: 5px;
}

.value {
  color: #333;
}

.tabs-container {
  background-color: #fff;
}

.tabs-content {
  width: 95%;
  margin: 0 auto;
}

.content-container {
  width: 95%;
  margin: 0 auto;
  padding: 25px 0;
}

/* 媒体查询: 针对手机设备 */
@media (max-width: 768px) {
  .top {
    height: 400px;
  }

  .container {
    width: 100%;
  }

  .info-item {
    margin-right: 20px;
  }

  .nickname {
    font-size: 20px;
  }

  .username {
    font-size: 16px;
  }

  .edit-text {
    font-size: 12px;
  }

  .info {
    margin-top: 15px;
  }

  .content-container {
    padding: 20px 0;
  }
}
</style>
